<style scoped lang="less">
.el-main {
  padding: 0;
}

.comment {
  display: flex;
  flex-direction: column;
  margin: 5px 40px;
  padding: 10px;
  background-color: #EFEFEF;
}
</style>

<template>
  <el-container>
    <el-main>
      <!--搜索-->
      <el-form ref="form" :model="search" inline style="width: 100%;">
        <el-form-item label="业主昵称：">
          <el-input v-model="search.nickName" placeholder="输入业主昵称" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="业主姓名：">
          <el-input v-model="search.realName" placeholder="输入业主姓名" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="search.phonenumber" placeholder="输入手机号" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="loadInteraction(1)">
            <i class="el-icon-search"/>搜索
          </el-button>
          <el-button size="mini" @click="nullSearch">
            <i class="el-icon-refresh"/>重置
          </el-button>
        </el-form-item>
      </el-form>

      <!--表格-->
      <el-table :data="interactions" index
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background:'#E4E7ED','text-align':'center',color:'#000'}"
                max-height="100%" style="width: 100%;">
        <el-table-column label="序号" width="50x">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="业主昵称" width="100">
          <template slot-scope="dept">
            <span v-text="dept.row.zyOwner.ownerNickname"/>
          </template>
        </el-table-column>
        <el-table-column label="业主姓名" width="80">
          <template slot-scope="dept">
            <span v-text="dept.row.zyOwner.ownerRealName"/>
          </template>
        </el-table-column>
        <el-table-column label="业主电话">
          <template slot-scope="scope">
            <span v-text="scope.row.zyOwner.ownerPhoneNumber"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
        <el-table-column prop="content" label="内容"/>
        <el-table-column label="图片">
          <template slot-scope="scope" v-if="scope.row.images !== null && scope.row.images !== ''">
            <img v-for="img in scope.row.images.split(',')"
                 :src="img" alt=""
                 style="width: 30%; height: 30%"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template slot-scope="scope">
            <el-button type="text" size="mini"
                       @click="moreInteraction = scope.row; dialogMore = true;">
              更多操作
            </el-button>
            <el-button type="text" @click="remove(scope.row)" size="mini">
              <i class="el-icon-delete"/>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          background
          :total="total"
          @size-change="sizeTo" @current-change="loadInteraction"
          layout="sizes, prev, pager, next, jumper, total"
          :page-sizes="[10, 20, 30, 50]"
          style="float: right"/>
      <div style="clear: both"/><!--清除浮动-->

      <!-- 更多 -->
      <el-dialog :visible.sync="dialogMore" title="社区互动详情" width="60%">
        <!-- 用户+时间 -->
        <div style="display: flex; flex-direction: row">
          <div>
            <el-avatar size="large" :src="moreInteraction.zyOwner.ownerPortrait"/>
          </div>
          <div style="display: flex; flex-direction: column">
            <span v-text="moreInteraction.zyOwner.ownerNickname"/>
            <span v-text="moreInteraction.createTime"/>
          </div>
        </div>

        <!--内容-->
        <div style="margin-left: 40px">
          <span v-text="moreInteraction.content"/>
        </div>

        <!--评论区-->
        <div v-for="comment in moreInteraction.zyComments"
             class="comment">
          <!--用户-->
          <div style="display: flex; flex-direction: row">
            <div style="margin-right: 5px">
              <el-avatar size="large" :src="comment.ownerPortrait"/>
            </div>
            <div style="display: flex; flex-direction: column">
              <span v-text="comment.ownerNickName"/>
              <span v-text="comment.createTime"/>
            </div>
          </div>
          <!--回复内容-->
          <span v-text="'回复 '+comment.parentOwner+':'+comment.content"
                style="margin-left: 45px"/>
          <el-button type="text" @click="removeComment(comment.commentId)"
                     size="mini" style="margin-left: 45px;width: 0">
            <i class="el-icon-delete"/>删除
          </el-button>
        </div>

        <div style="float: right">
          <el-button @click="dialogMore = false" size="small">取消</el-button>
          <el-button type="primary" @click="dialogMore = false" size="small">确定</el-button>
        </div>
        <div style="clear: both"/><!--清除浮动-->
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

export default {

  methods: {
    //删除评论
    removeComment(id) {
      this.$confirm("确定要删除？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'error'
      }).then(() => {
        this.$axios.delete('/zyComment/comment/' + id).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功！");
            setTimeout(function () {
              location.reload();
            }, 500);
          }
        });
      }).catch(() => {
        comment.delFlag = 0;
      });
    },

    //删除
    remove(interaction) {
      this.$confirm("确定要删除？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'error'
      }).then(() => {
        interaction.delFlag = "1";
        this.$axios.post('/interaction/interaction', interaction).then(res => {
          if (res.data.code === 200) {
            this.$message.success("删除成功！");
            setTimeout(function () {
              location.reload();
            }, 500);
          }
        });
      }).catch(() => {
      });
    },

    //查询互动信息+搜索
    loadInteraction(current) {
      const communityId = localStorage.getItem("comId");
      this.$axios.post("/interaction/s/" + current, {
        size: this.sizes,
        nickName: this.search.nickName,
        realName: this.search.realName,
        phonenumber: this.search.phonenumber,
        communityId: communityId,
      }).then(res => {
        if (res.data.code === 200) {
          this.interactions = res.data.data.records;
          // console.log(this.interactions[0].zyComment)
          this.total = res.data.data.total;
        }
      }).catch(res => {
        this.$message.error("连接异常")
      })
    },

    //更改每页条数
    sizeTo(size) {
      this.sizes = size;
      this.loadOwner(1);
    },
    //重置搜索
    nullSearch() {
      this.search = {nickName: '', realName: '', phonenumber: ''}
      this.loadInteraction(1);
    },
  },

  mounted() {
    this.loadInteraction(1);
    //获取所有小区
    this.$axios.get('/zyCommunity/communitys').then(res => {
      if (res.data.code === 200) {
        this.communitys = res.data.data;
      }
    });
  },

  data() {
    return {
      interaction: {}, /* 父评论对象 */
      search: {
        nickName: '',    /*昵称*/
        realName: '',    /*真实姓名*/
        phonenumber: '',  /*手机号*/
        communityId: '',/* 小区id */
      },/* 搜索框 */
      interactions: [],
      communitys: [],/* 小区数组 */
      total: 0,      /*总条数*/
      sizes: 10,     /*每页条数*/
      dialogMore: false,/* 子评论菜单状态 */
      moreInteraction: {
        zyOwner: {},
      },/* 更多菜单数据 */
    }
  },
}
</script>
